<template>
  <div>
<h2>{{ info }}</h2>
<button @click="changeInfo">change</button>
<button @click="changeLike">changeLike</button>
  </div>
</template>

<script>
import {shallowRef, triggerRef } from 'vue'
export default {
  setup () {
    // const info=ref({name:'小帅')
    const info=shallowRef ({name:'小帅',
    like:{n:1}
  })

    const changeInfo=()=>{
      // info.value.name='大撒'
      // info.value={name:'大撒'}
      // console.log(info.value);

      info.value.like.n=2
      triggerRef(info)
    }

    const changeLike=()=>{
      info.value.like.n=3
    }
    return {
      info,
      changeInfo,
      changeLike
    }
  }
}
</script>

<style  scoped>

</style>